// 头部轮播图
//等资源加载完
window.addEventListener('load', function () {
    //获取头部轮播图部分父盒子
    var header = document.querySelector(".header");
    // console.log(header);
    //获取轮播图ul 父亲元素
    var pageUl = document.querySelector(".swiper");
    //获取轮播图ul 的li
    var pageLis = document.querySelectorAll(".swiper li");
    //获取li 的宽度
    var liWidth = parseInt(getComputedStyle(pageLis[0]).width);
    // console.log(liWidth);

    cloneLi();

    //先调用初始化定时器
    initEvent();
    //开启一个定时器
    var timer = setInterval(function () {
        onNext();
    }, 5000);

    //调用初始化定时器
    initEvent();

    //克隆一份第一个li 放在ul后面   实现无缝滚动
    function cloneLi() {
        let li = pageLis[0].cloneNode(true);
        //添加到ul中
        pageUl.appendChild(li);
    }

    //记录图片是否到最后一张
    var num = 0;
    //下一张图片切换
    function onNext() {
        num++;
        //图片到最后一张,让ul 的left瞬间为0，num 为1 
        //重新开始
        if (num == pageUl.children.length) {
            pageUl.style.left = 0;
            num = 1;
        }
        //向左偏移位置  num*li宽度
        let moveLeft = num * liWidth;
        //动画
        animate(pageUl, { left: -moveLeft });
    }


    //初始化添加定时器鼠标移入关闭定时器，离开开启
    function initEvent() {
        header.onmouseenter = function () {
            clearInterval(timer);
        }
        header.onmouseleave = function () {
            timer = setInterval(function () {
                onNext();
            }, 5000)
        }
    }


    // 拿到引入头部导航部分,修改a标签颜色，logo地址
    var iframe = document.getElementsByTagName("iframe")[1].contentDocument;
    var menuAs = iframe.querySelectorAll("a");
    var menuImg = iframe.querySelector(".logo a img");
    // console.log(menuImg);
    menuImg.src = '../images/logow.png';
    // console.log(menuAs);
    menuAs.forEach(function (item) {
        item.style.color = "#fff";
    })
    //    iframe.contentWindow.document.style.backgroundColor = 'red';


    // 头部点击搜索出现蒙层
    var search = iframe.querySelectorAll(".head-menu .search");
    // console.log(search);
    search[0].addEventListener("click",function(){
       var mask = document.querySelector(".wrap .mask");
       mask.style.display = 'block';
       var maskwrap = document.querySelector(".maskwrap");
        animate(maskwrap,{height:300});
    })

//    点击搜索关闭按钮
    var ifranmSearch = document.getElementsByTagName("iframe")[0].contentDocument;
    var searchBtn = ifranmSearch.querySelector(".search-mask button");
    // console.log(searchBtn);
    searchBtn.addEventListener('click',function(){
        var maskwrap = document.querySelector(".maskwrap");
        animate(maskwrap,{height:0});
        var mask = document.querySelector(".wrap .mask");
        mask.style.display = 'none';
    })


    //轮播图脚部上方
    var mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // autoplay: false,
        autoplay: {
            delay: 3000,
        },
    });

    // 发现风格模块播图
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: "auto",
        loop: true, // 循环模式选项
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        autoplay: {
            delay: 3500,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
        },
    });

});


